/**
  * @Description: WoShop商城
  * @Author: 梧桐
  * @Copyright: 武汉一一零七科技有限公司©版权所有
  * @Link: www.wo-shop.net
  * @Contact: QQ:2487937004
  */
 <template>
    <view class="index_class">

        <view class="bus-top">

		</view>
        <view class="the-content">
            <view class="shop-list" v-for="(time,index) in shopList" :key="index">
                <view class="the-title u-flex u-col-center u-row-between" @click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:time.id}})">
                    <view class="u-flex">
                      <u-avatar :src="time.logo?time.logo : imgSTATICURL+'images/logo.png'"></u-avatar>
                        <view class="u-m-l-20">
                            <view class="shopName">{{time.shop_name}}</view>
                            <view>
                              <view class="pf3" v-if="time.shop_desc!=null">{{time.shop_desc}}</view>
                              <text class="pf" v-if="time.zonghe_fen==0">暂无评分</text>
                              <text class="pf" v-if="time.zonghe_fen!=0">{{time.zonghe_fen}}分</text>
                              <text class="pf4" v-if="time.single_freight!=0">配送 ￥{{time.single_freight}}</text>
                              <text class="pf4" v-if="time.single_freight==0">免费配送</text>
                              <text class="pf2" v-if="time.free_freight!=0">满{{time.free_freight}}免费配送</text>
                            </view>
                        </view>
                    </view>
					
					<view class="location">
						<view class="location-distance">{{time.distance}}km</view>	
						<u-tag :text="$t('进店逛逛')" mode="light" size="mini" shape="circle" type="warning" @click="$u.route({url:'/pagesC/shop/storeDetails',params:{shop_id:time.id}})"/>
					</view>
                </view>
                <view class="itemsWrap u-flex">
                    <view class="items" v-for="(shopitem,index2) in time.goodres" :key="index2" @click="$u.route({url:'/pagesC/goods/goodsDetails',params:{id:shopitem.id}})">
                        <u-image width="200" height="200" border-radius="18" :src="shopitem.thumb_url" style="margin-bottom:8upx" />
                        <view class="u-line-1">{{shopitem.goods_name}}</view>
                        <view class="money">￥{{shopitem.zs_price}}</view>
                    </view>
                </view>
            </view>

            <view class="depot" v-if="isshow">
				<image class="img" :src="$imgGoodsNullUrl" />
				<view class="tps" style="margin-top:15upx;">{{$t('暂无数据')}}</view>
				<!-- <view class="stroll" @click="getnav('/pages/tabBar/category')">到处逛逛</view> -->
			</view>
            <loadMore :loadingType="typeLoding"></loadMore>

        </view>
    </view>
</template>

<script>
let page = 1
export default {
    data(){
        return {
			imgSTATICURL: this.STATICURL,
            searchData:{},
            shopList:[], // 店铺列表
            typeLoding:0,
            showIndex:0,
            Keyword:'',
            isshow:false,
			location:{}
        }
    },
    onShow(){
        page = 1
    },
    onLoad(){
		this.location = uni.getStorageSync("location")
        page = 1
        this.getShopList()
     
    },
    onReachBottom(){
        if (this.typeLoding !== 0) return false
            if (!this.Keyword) {
                this.getShopList()

                return false
            }

        this.typeLoding = 1
        page++
        this.getsearchshops()
    },
    methods: {
        getShopList () {
            this.$http.getShopList({
                page: page,
				longitude:this.location.lng,
				latitude:this.location.lat
            }).then(res => {
                if (res.status === 200) {

                    if(res.data.length == 0) {
                        this.typeLoding = 2
                    }

                    this.shopList.push(...res.data.data)
                    page = page + 1
                } else {
                    this.typeLoding = 0
                }
            })
        },

        getsearchshops(name = ''){
            let data = {
                keyword_name:this.searchData.keyword_name,
                sort:this.Keyword,
                page:page
            }
            this.$loading()
            this.$http.getsearchshops(data).then(res=>{
                if(res.status == 200) {

                    if(res.data.length == 0) {
                        this.typeLoding = 2
                    }
                    this.typeLoding = 0
                    this.shopList = [...this.shopList,...res.data]
                    if(this.shopList.length == 0) {
							this.isshow = true
						} else {
                        this.isshow = false
                    }
                } else {
                    this.typeLoding = 0
                }
            })
        },

        searchKeyWord(){
            this.showIndex = 0
            page = 1
            this.shopList = []
            this.Keyword = ''
            this.getsearchshops()
        }
    },
}
</script>

<style scoped lang="scss">
	@import '~uview-ui/index.scss';
.to-tltle{
  display: flex;
  justify-content: space-between;
}


.shop-search {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 20upx;
    height: 60upx;
    width: 620upx;
    background-color: #EEEFEF;
    border-radius: 30upx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .iconfont {
        height: 60upx;
        line-height: 60upx;
        width: 60upx;
        text-align: center;
        color: #999;
    }
    .bus-tap {
        height: 60upx;
        line-height: 60upx;
        width: 100upx;
        text-align: center;
        color: #333333;
    }
    input {
        flex: 1;
        color: #999;
        text-align: left;
    }
}
.itemsWrap{
  margin-top: 20upx;
  overflow-x: scroll;
  .items{

  width:33%;
    margin-right: 20upx;
  }
}
.shopName{
  font-size: 30upx;
}
.shop-list{
  background-color: #fff;
  margin: 15upx 20upx ;
  border-radius: 10px;
  padding: 25upx 20upx;
}
.location{
	text-align:right;
}
.location-distance{
	height:60rpx;
}
.pf {
		color: #df9500; 
		font-size: 13px;
	}
.pf2 {
	margin-left: 10px;
	padding: 1px 1px;
	border: 1px solid #fa3f3f;
	border-radius: 4px;
	color: #fa3f3f;
	font-size: 10px;
	background-color: #fff;
	box-sizing: border-box;
}
.pf3 {
	color: #858696;
	font-size: 12px;
	white-space: nowrap; 
	display: block; 
	text-overflow: ellipsis;
	overflow: hidden; 
	max-width: 200px; 
}
.pf4 {
	color: #858696;
	font-size: 10px;
	margin-left: 10px;
}
</style>
